<template>
  <div class="wrapper">
    <a-form>
      <a-row :gutter="24">
        <a-col :lg="6" :md="12" :sm="24">
          <a-form-item v-bind="formItemLayout" label="季度">
            <a-quarter-picker v-model="value" @quarterChange="getQuarte" />
          </a-form-item>
        </a-col>
        <a-col :lg="6" :md="12" :sm="24">
          <a-form-item v-bind="formItemLayout" label="人员类型">
            <a-select showSearch v-model="queryParam.personType" @change="handleSelect">
              <a-select-option
                v-for="item in personList"
                :key="item.value"
                :value="item.value"
                >{{ item.label }}</a-select-option
              >
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div id="my_bar_chart"></div>
  </div>
</template>

<script>
import { getCurMonthData } from "@/api/allApi";
import AQuarterPicker from "./AQuarterPicker.vue";
import * as echarts from "echarts";
export default {
  components: { AQuarterPicker },
  data() {
    return {
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 10 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 14 },
        },
      },
      personList: [
        {
          value: 2,
          label: "安置帮教",
        },
        {
          value: 3,
          label: "后续照管",
        },
      ],
      queryParam: {
        year: new Date().getFullYear(),
        sortIndex: this.$moment().quarter(),
        personType: 2,
      },
      value: "",
      barChart: null,
      typeList: ["应走访数", "实走访数", "走访率"],
      option: {
        title: {
          text: "季度走访情况",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["应走访数", "实走访数", "走访率"],
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar", "stack"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        xAxis: [
          {
            type: "category",

            axisLabel: {
              rotate: 45,
            },
            axisTick: { show: false },
            data: [],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          // {
          //   name: 'Forest',
          //   type: 'bar',
          //   barGap: 0,
          //   label: labelOption,
          //   emphasis: {
          //     focus: 'series'
          //   },
          //   data: [320, 332, 301, 334, 390]
          // },
        ],
      },
    };
  },
  created() {},
  mounted() {
    this.barChart = echarts.init(document.getElementById("my_bar_chart"));
    this.initData();
  },
  methods: {
    getQuarte(p) {
      console.log(p);
      this.queryParam = { ...p };
      this.initData();
    },
    handleSelect(v){
      this.queryParam = Object.assign(this.queryParam,{
        personType: v
      });
      this.initData();
    },


    async initData() {
      let xData = [];
      let yData = [];
      let labelOption = {
        show: true,
        position: "top",
        formatter: function (params) {
          return params.seriesName == "走访率"
            ? `${params.value}%`
            : params.value;
        },
        fontSize: 14,
      };
      if (this.queryParam.year) {
        const cnNum = ["一", "二", "三", "四"];
        this.option.title.text = `季度走访情况（${this.queryParam.year}年${
          cnNum[this.queryParam.sortIndex - 1]
        }季度）`;
      }
      const { data } = await getCurMonthData({
        departmentid: 1,
        phaseType: "Quarter",
        ...this.queryParam,
      });
      console.log(data);
      if (data && data.length > 0) {
        xData = data.map((el) => {
          return el.DepartmentName;
        });
        yData = this.typeList.map((el) => {
          return {
            name: el,
            type: "bar",
            barGap: 0,
            label: labelOption,
            itemStyle: {
              // 设置柱子颜色
              color:
                el == "应走访数"
                  ? "#5470C6"
                  : el == "实走访数"
                  ? "#92CC76"
                  : "#ee6666",
            },
            data: data.map((e) => {
              return el == "应走访数"
                ? e.ShouldPersonNum
                : el == "实走访数"
                ? e.AlreadyVisitNum
                : e.VisitRate;
            }),
          };
        });
        this.option.xAxis[0].data = xData;
        this.option.series = yData;
        this.barChart.setOption(this.option);
      }
    },
  },
};
</script>

<style>
#my_bar_chart {
  padding-top: 10px;
  width: 90%;
  height: 550px;
  border: 1px solid #ccc;
}
</style>
